<template>
    <div class="store-details">
        <c-title text="门店详情"></c-title>
        <div class="main">
            <div class="title">营业时间</div>
            <div class="info" v-if="info.open_time&&info.open_time.length!==0">
                <span v-for="item in info.open_time">
                    <template v-for="(c_item, i) in item.weeks">{{ c_item }}<template
                            v-if="i + 1 !== item.weeks.length">、</template></template>&nbsp;
                    <template v-for="(c_item, c_index) in item.times">{{ format(c_item.start_time, c_item.end_time)
                        }}<template v-if="c_index + 1 !== item.times.length">、</template></template>
                </span>
            </div>
            <div class="title">设施及服务</div>
            <div class="info" style="margin-bottom: 1.25rem;">{{ info.facilities_and_service }}</div>
            <div class="title">营业执照</div>
            <img :src="info.business_license" alt="">
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            store_id: "",
            info:{},

        };
    },
    mounted() {
        this.store_id = this.$route.params.store_id;
        this.getDetail()
    },
    methods: {
        format(start_time, end_time) {
            let start_date = new Date(start_time * 1)
            let end_date = new Date(end_time * 1)
            var start_hour = start_date.getHours() < 10 ? `0${start_date.getHours()}` : start_date.getHours();
            var start_minute = start_date.getMinutes() < 10 ? `0${start_date.getMinutes()}` : start_date.getMinutes();
            var end_hour = end_date.getHours() < 10 ? `0${end_date.getHours()}` : end_date.getHours();
            var end_minute = end_date.getMinutes() < 10 ? `0${end_date.getMinutes()}` : end_date.getMinutes();
            return `${start_hour}:${start_minute}～${end_hour}:${end_minute}`;
        },
        async getDetail() {
            let { result, msg, data } = await $http.post("plugin.local-life.api.store.info", { id: this.store_id }, '')
            if (result) {
                this.info = data || {};

            } else {
                this.$toast(msg);
            }
        }
    }
};
</script>

<style scoped lang='scss'>
.store-details {
    padding: .625rem .75rem;

    .main {
        background: #FFFFFF;
        border-radius: .5rem;
        padding: .625rem;
    }

    .title {
        font-weight: bold;
        font-size: .875rem;
        color: #00001C;
        line-height: 1;
        text-align: left;
    }

    img {
        width: 20.6875rem;
        border-radius: .625rem;
        margin-top: .9375rem;
    }

    .info {
        text-align: left;
        font-weight: 400;
        font-size: .75rem;
        line-height: 1;
        color: #00001C;
        margin: .9375rem 0 1.5625rem;
    }
}
</style>